<template>
	<!-- <view style="background-color: white;">
		<button @click="login">链接</button>
		<button @click="send">发送aaa</button>
	</view> -->
	<view class="bgConston">
		<view class="headerbox"
			style="height: 60px;background-color: ;border-bottom: 1px solid gray;box-shadow: 0px 0px 5px #000;">
			<view class=""
				style="margin: 0 auto;height: 60px;width: 200px; background-color: ;text-align: center;line-height: 40px;">
				{{fromUsername}}
			</view>
		</view>
		<view class="userSession" :style="{height:sHeight+'px'}">
			<view v-for="(userContext,index) in userContextItem" :key="userContext.id">
				<view class="userH">
					<text>{{item.userContext}}</text>
					<!-- 是否显示用户昵称 -->
					<template v-if="userContext.fromUsername != it1.fromUsername">
						<view class="userType">
							<template v-if="userContext.fromUsername !=''">
								<!-- <view class="userN">
								<text>{{userContext.userName}}</text>
								<text>{{userContext.time}}</text>
							</view> -->
							</template>
							<!-- 文本格式 -->
							<template>
								<div style="float: left;">
									<img src='' style="float: left;t: cover;width:40px;height:40px;">
									<!-- <view class="textType" style="float: left;"> -->
									<span
										style="height:40px;float:left; margin-left: 10px; border-radius:12px;background-color:black;line-height:30px;padding:5px;box-sizing:border-box;color:white">
										<text>{{userContext.chatContent}}</text>
									</span>
									<!-- </view> -->
								</div>
							</template>
							<view v-html="content" style="height: 500px; overflow:auto; border-top: 1px solid #ccc;">
								<view v-html="content"></view>
							</view>
						</view>
					</template>
				</view>
				<view class="userInput">
					<u--input placeholder="请输入内容" border="surround" v-model="value"></u--input>
					<view class="sumText" @click="send">发送</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{
					username:''
				},
				//获取当前用户登录名称
				userName:'',
				fromUsername:'永城',
				userContextItem: [{
					fromUsername: 10, // 发送者
					toUsername: 11, // 接收者
					fromUsername: "纵横天下",
					chatContent: "你好有什么可以帮助你的嘛",
					chatTime: (new Date().getTime())
				}, ],
				value: '',
				content: '',

				it1: { // 
					"fromUsername": "10", // 发送者
					"toUsername": "11", // 接收者
					"messageStatus": "",
					"chatTime": "",
					"chatContent": "",
				},
				websocket: '',
				sHeight: 400
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.sHeight = height;
				}
			})
		},
		mounted() {
			this.login()
			this.selectChatRecord()
		},
		methods: {
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();	
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			// saveChatRecord() { // 保存聊天记录
			// 	uni.request({
			// 		method: 'GET',
			// 		url: 'http://localhost:8090/order/ContextSaveAdd',
			// 		data: this.it1,
			// 		success: (res) => {
			// 			console.log(res.data);
			// 			// this.text = 'request success';
			// 		}
			// 	});
			// },
			
			selectChatRecord(){ // 查询聊天记录
				const params = {
				fromUserName: this.userName,
				toUserName: this.chatUser
				};// 查询聊天记录
				uni.request({
					method:'GET',
				    url: 'http://localhost:8088/chatRecord/getUserChatRecord',
				    data: params,
				    success: (res) => {
				        console.log(res.data.obj)
						this.chatRecordData = res.data.obj
						for(let i=0; i<this.chatRecordData.length;i++){
							console.log(this.chatRecordData[i])
							if(this.chatRecordData[i].fromUsername === 11){
								this.createContent(null,this.chatRecordData[i].fromUsername,this.chatRecordData[i].messageStatus,this.chatRecordData[i].chatTime)
							}else{
								this.createContent(this.chatRecordData[i].toUsername,null,this.chatRecordData[i].messageStatus,this.chatRecordData[i].chatTime)
							}
						}
				    }
				});
			},
			login() {
				this.websocket = new WebSocket("ws://localhost:8088/imserver/123")
				this.websocket.onopen = function() {
					console.log("websocket已打开");
				};
				this.websocket.onmessage = function(mes) {
					console.log(mes);
				}
			},


			send() { //发送消息
				if (!this.value) {
					alert("请输入内容")
				} else {
					if (typeof(WebSocket) == "undefined") {
						console.log("您的浏览器不支持WebSocket")
					} else {
						console.log("您的浏览器支持WebSocket")

						// this.it.msg = this.value
						this.it1.chatContent = this.value
						this.it1.chatTime = this.dateFormat(this.date)
						this.websocket.send(JSON.stringify(this.it1))
						// 构建消息内容，本人消息
						this.createContent(null, this.it.fromUsername, this.value, this.dateFormat(this.date))
						// this.saveChatRecord()
						this.value = ''
					}
				}
				// this.websocket.send("aaa")
			},
			createContent(remoteUser, nowUser, value, time) {
				// 这个方法是用来将 json的聊天消息数据转换成 html的。
				let html
				const that = this
				// 当前用户消息
				if (nowUser) { // nowUser 表示是否显示当前用户发送的聊天消息，绿色气泡A
					html =
						'<p style="width:100%;height:50px;margin-top:10px">\n' +
						'<span style="width:100%;height:10px;line-height:10px;text-align:center;font-size:13px;display:block;color:#808080">' +
						time + '</span>\n' +
						'  <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px;float:right;margin-right:10px;">\n' +
						'    <img src="../../static/customer.png" style="object-fit: cover;width:40px;height:40px;">\n' +
						'  </span>\n' +
						'<span style="width:250px;white-space:normal;height:40px;float:right;display:block;margin-right:10px;">\n' +
						'<span style="height:40px;float:right;border-radius:12px;background-color:green;line-height:30px;padding:5px;box-sizing:border-box;color:white">' +
						value + '</span>\n' +
						'</span>\n' +
						'</span>\n'
				} else if (remoteUser) { // remoteUser表示远程用户聊天消息，蓝色的气泡
					html = '<p style="width:100%;height:50px;margin-top:10px">\n' +
						'<span style="width:100%;height:10px;line-height:10px;text-align:center;font-size:13px;display:block;color:#808080"">' +
						time + '</span>\n' +
						'  <span class="el-avatar el-avatar--circle" style="height: 40px; width: 40px;float:left;margin-left:10px;">\n' +
						'    <img src="" style="object-fit: cover;width:40px;height:40px;">\n' +
						'  </span>\n' +
						'<span style="width:250px;white-space:normal;height:40px;float:left;display:block;margin-left:10px;">\n' +
						'<span style="height:40px;float:left;border-radius:12px;background-color:deepskyblue;line-height:30px;padding:5px;box-sizing:border-box;color:white">' +
						value + '</span>\n' +
						'</span>\n' +
						'</span>\n'
				}
				console.log(html)
				that.content += html;
			},
		},
		currentTime() { // 获取当前时间
			setInterval(this.getDate, 500)
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.friendName = option.friendName
			let _this = this;
			setInterval(function() {
				_this.date = Date.parse(new Date());
			}, 1000);
		},
	}
</script>

<style scoped>
	.bgConston {
		width: 100%;
		height: 100%;
		/* background-color: aqua; */
		margin: 0;
		padding: 0;
	}

	.userSession {
		width: 100%;
		height: auto;
		border-top: 1upx solid #ededed;
		overflow: auto;
	}

	.userH {
		width: 100%;
		height: auto;
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		padding: 20upx;
	}

	.userMe {
		width: 95%;
		height: auto;
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		padding: 20upx;
		justify-content: flex-start;
		flex-direction: row-reverse;
		text-align: right;
	}

	.userImg {
		width: 70upx;
		height: 70upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15upx;
		margin-left: 15upx;
	}

	.userImg>image {
		width: 65upx;
		height: 65upx;
		border-radius: 100%;
	}

	.userType {
		display: flex;

		justify-content: center;
		flex-direction: column;
		padding: 10upx;
	}

	.userN {
		height: 50upx;
		display: flex;
		justify-content: space-around;
	}

	.userN>text {
		height: 50upx;
		min-height: 100upx;
		color: darkturquoise;
	}

	.textType {
		max-width: 400upx;
		/* background-color: blanchedalmond; */
		background-color: black;
		border-radius: 10upx;
		/* box-shadow: 3upx 3upx 3upx #e3e3e3; */
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10upx;
	}

	.textType>text {
		font-size: 28upx;
		color: white;
		/* color: aqua; */
	}

	.imgType {
		max-width: 300upx;
		max-height: 420upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: bisque;
		border-radius: 20upx;
		box-shadow: 3upx 3upx 3upx #ededed;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.imgType>image {
		width: 250px;
		height: 350px;
		padding: 20px;
	}

	.videoType {
		width: 300upx;
		height: 400upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: aquamarine;
		border-radius: 20upx;
		box-shadow: 3upx 3upx 3upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.videoType>video {
		width: 270upx;
		height: 370upx;
	}

	.userInput {
		height: 100upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 10upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 5upx 0 #e3e3e3;
	}

	.userInput>input {
		height: 50upx;
		background: #f4f5f6;
		border-radius: 15upx;
		padding: 10upx 10upx;
		flex: 1;
		margin-right: 20upx;
		font-size: 28upx;
	}

	.userInput>view {
		width: 120upx;
		font-size: 24upx;
		/* color: aqua; */
		height: 60upx;
		/* background-color: #E80080; */
		border-radius: 20upx;
		text-align: center;
		line-height: 60upx;
	}

	.sumText {
		color: black;
	}
</style>
